以one month rails的線上課程及codecademy的Ruby課程,紀錄及分享一個月來學習的歷程及心得。
Step1: 將Bootstrap Gem加入Gemfile bootstrap-sass gem連結:https://github.com/thomas-mcdonald/bootstrap-sass
將下列code加到gemfile.rb
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'bootstrap-sass', '~> 2.3.2.2'
Step2: Bundle install
terminal
$ bundle install #安裝剛加入的Gem
記得安裝完要重新啟動Rails server
Step3: 加入 bootstrap css
首先新增一個檔案並存在下列路徑:
app/assets/stylesheets/styles.css.scss
貼上以下兩行code
@import 'bootstrap'; #從字面上就很直白是匯入bootstrap
@import 'bootstrap-responsive'; #將bootstrap設定成可適性網頁,意即可隨視窗大小改變layout
Step4: 加入javascript app/assets/javascripts/application.js
//= require jquery.masonry.min.js
//= require bootstrap
//= require_tree
Step5: Style home page
接著就是利用bootstrap來設計你的頁面啦
Bootstrap官網:http://getbootstrap.com/
Step5: Save and Upload to Git and Heroku
terminal
git add .
git commit -am 'Add Bootstrap'
git push
git push heroku master